@import '../../assets/styles/vars';

.hidden {
  display: none;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

.modal {
  background-color: transparent;
  left: 50%;
  margin-left: -15vw;
  margin-top: -10vw;
  position: fixed;
  top: 50%;
  z-index: 11; /* 1px higher than the overlay layer */
}

@media #{$mobile} {
  .modal {
    margin-left: -37.5vw;
    margin-top: -15vw;
  }
}

.center {
  align-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
